<!--
 * @Author: gct
 * @Date: 2022-04-12 15:26:37
 * @LastEditors: Gct
 * @LastEditTime: 2022-04-15 10:31:30
 * @Description: 
-->
<template>
  <div>
    <!-- 第一行开始 -->
    <el-form
      size="small"
      :inline="true"
      :model="params"
      class="demo-form-inline"
    >
      <el-form-item>
        <el-date-picker
          v-model="timer"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="params.applyType"
          placeholder="请选择类型"
          clearable
        >
          <el-option label="充值" value="充值"></el-option>
          <el-option label="提现" value="提现"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="params.status" placeholder="请选择状态" clearable>
          <el-option label="通过" value="通过"></el-option>
          <el-option label="不通过" value="不通过"></el-option>
          <el-option label="未审核" value="未审核"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.userId"
          placeholder="请选择用户编号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 第一行结束 -->
    <!-- 第二行开始 -->
    <div>
      <el-table :data="accountData" border style="width: 100%">
        <el-table-column fixed type="index" :index="1" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="userId" label="申请人编号" width="120">
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.applyTime | fmtTime }}
          </template>
        </el-table-column>
        <el-table-column prop="applyType" label="变更类型" width="120">
        </el-table-column>
        <el-table-column prop="money" label="变更资金"> </el-table-column>
        <el-table-column prop="reason" label="变更原因">
          <template slot-scope="scope">
            {{ scope.row.reason || "无" }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag
              size="small"
              type="success"
              v-if="scope.row.status === '通过'"
              >{{ scope.row.status }}</el-tag
            >
            <el-tag
              size="small"
              type="warning"
              v-else-if="scope.row.status === '未审核'"
              >{{ scope.row.status }}</el-tag
            >
            <el-tag size="small" type="danger" v-else>{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <el-button type="text" size="small">通过</el-button>
          <el-button type="text" size="small">不通过</el-button>
        </el-table-column>
      </el-table>
    </div>
    <!-- 第二行结束 -->
  </div>
</template>
<script>
import { pageQueryAccountApply, checkPass, checkNoPass } from "@/api/account";
export default {
  data() {
    return {
      // 分页根据条件查询的表单对象
      params: {
        page: 1,
        pageSize: 8,
      },
      // 时间日期选择器绑定的数组
      timer: [],
      // 时间日期选择器的配置对象
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 账户数据
      accountData: [],
    };
  },
  created() {
    this.findAllAccount();
  },
  methods: {
    /**
     * @Author: [kangjie]
     * @description: 根据条件查询
     * @param {*}
     * @return {*}
     */
    toSearch() {
      this.findAllAccount();
    },
    /**
     * @Author: [kangjie]
     * @description: 分页并根据条件查询账户数据
     * @param {*}
     * @return {*}
     */
    async findAllAccount() {
      let temp = { ...this.params };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      // 根据时间日期选择器查询
      //判断时间存不存在
      if (this.timer) {
        temp.beginTime = this.timer[0];
        temp.endTime = this.timer[1];
      }
      let res = await pageQueryAccountApply(temp);
      console.log(res, "获取账户响应");
      this.accountData = res.data.list;
      this.total = res.data.total;
    },
  },
};
</script>